<template>
	<view class="mask-coupon" >
		<view class="no-data" v-if="cuponList.length == 0" @click="getOrderList()">
		    <image src="https://file.genepre.com/wechat/nomsg5_new.png" mode="aspectFit" class="no-data-img"></image>
		   {{noData}}
		</view>
	    <view class="wx-coupon" >
			<view style="height: 1px; width:100vw;background-color: #e1e1e1;"></view>
			<view class="cupon_item" v-for="(item,index) in cuponList" :key="index">
				<view class="content">
					<view style="margin-top: 15rpx; margin-right:15rpx">
						<text class="name">{{item.name}}</text>
					</view>
					<view style="margin-top: 15rpx;">
						<text class="description">{{item.description}}</text>
					</view>
					<view style="margin-top: 15rpx;">
						<text class="publishTime">{{item.publishTime}}</text>
					</view>	
				</view>
				<image class="cupon_bg" src="http://113.142.144.25:9301/statics/appimg/icon_cupon_bg_new.png" mode="" @click="getCupon(item.id)">
				</image>
			</view>
	    </view>
		
	</view>
</template>

<script>
	import * as cupon from '@/api/cupon'
	export default {
		components: {
			"send-coupon": "plugin://sendCoupon/send-coupon"
		},
		data() {
			return {
				cuponList:[],
				showDialog:'false',
				userInfo:{},
				memberId:'',
				query:{
					memberId:''
				},
				noData:'加载中',
			}
		},
		onLoad() {
			this.getUser();
			this.getCuponList();
		},
		methods:{
			getUser(){
				var value = uni.getStorageSync('userInfo')
				this.query.memberId = value.login_user.member.id
			},
			getCuponList(){
				uni.showLoading({
					title:"加载中。。。"
				})
				this.cuponList = []
				var that= this
				cupon.getCuponList(this.query).then((res)=>{
					uni.hideLoading({})
					res.rows.forEach(v => {
						if(v.sflq == 1){
							this.cuponList.push(v)
						}
					})
					
				});
				if(this.cuponList.length == 0){
					this.noData = '暂无数据'
				}
			},
		}
	}
</script>

<style>
	.mask-coupon{
		height: fit-content;
		width: 100vw;
		background-color: #e1e1e1;
	}
	
	.no-data {
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}
	
	.wx-coupon{
		height: 100vh;
		background-color: #e1e1e1;
	}
	
	.cupon_item {
		height: 180rpx;
		background-color: #fff;
		margin:35rpx 35rpx;
		border-radius: 15rpx;
	}
	
	.cupon_bg{
		display: block;
		width: 200rpx;
		height:100rpx;
		margin-top: 40rpx;
		float: right;
		margin-right: 25rpx;
	}
	
	
	.content {
		width: 60%; 
		height: 180rpx;
		float: left;
		padding-left: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	
	.name {
		font-size:32rpx
	}
	
	.description{
		font-size: 25rpx;
		color: #fd0606;
	}
	
	.publishTime {
		font-size: 25rpx;
		color: dimgray;
	}
</style>